<template>
	<view class="mine">
		<view class="head">
			<view class="avatars">
				<view>
					<image class="wo avatar" :src="avatars[0]"></image>
					<image class="heart" src="/static/mine/heart_icon.png"></image>
					<image class="ta avatar" :src="avatars[1]"></image>
					<view class="avatar-line"></view>
				</view>
			</view>
			<view class="names">
				<view class="wo-name">张三</view>
				<view class="ta-name">李四</view>
			</view>
			<view class="head-bottom">
				<view class="time">
					<view class="date">2021年08月14日</view>
					<view class="words">相爱于</view>
				</view>
				<view class="records">
					<view class="count">5个</view>
					<view class="words">记录时刻</view>
				</view>
			</view>
		</view>
		<view class="operations">
			<view class="operation">
				<view class="left">
					<image class="left-icon" src="/static/mine/mine_setting.png"></image>
					<view class="desc">设置信息</view>
				</view>
				<image class="right-icon" src="/static/mine/mine_right.png"></image>
			</view>
			<view class="operation">
				<view class="left">
					<image class="left-icon" src="/static/mine/help_qrey.png"></image>
					<view class="desc">关于</view>
				</view>
				<image class="right-icon" src="/static/mine/mine_right.png"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-text">我有个愿望：希望等我们白头时，能细数有你在的</view>
			<view class="bottom-text">恋爱时光</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive
	} from 'vue'
	export default {
		setup() {
			const avatars = reactive([
				'https://img.72qq.com/file/202112/10/4a2302f528.jpg',
				'https://img.72qq.com/file/202112/14/6de3dfc39a.jpg'
			])
			return {
				avatars
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		box-sizing: border-box;
		overflow-y: scroll;
		padding: 20rpx 40rpx 0;
		height: 100vh;
	}

	.head {
		align-items: center;
		background: #ff445a;
		border-radius: 30rpx;
		box-shadow: 0 20rpx 30rpx 0 rgba(255, 68, 90, .3);
		flex-direction: column;
		height: 390rpx;
		width: 670rpx;
	}

	.head,
	.avatars {
		display: flex;
		position: relative;
		z-index: 1;
	}

	.avatars {
		height: 120rpx;
		margin-bottom: 30rpx;
		margin-top: 40rpx;
		width: 460rpx;
	}

	.avatars .wo {
		left: 0;
	}

	.avatars .ta {
		right: 0;
	}

	.avatar {
		background: #ff445a;
		border: 2rpx solid #fff;
		border-radius: 50%;
		height: 116rpx;
		top: 0;
		width: 116rpx;
	}

	.avatar,
	.heart {
		position: absolute;
		z-index: 2;
	}

	.heart {
		height: 88rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 88rpx;
	}

	.avatar-line {
		background: #ffa1ac;
		height: 120rpx;
		left: 50%;
		position: absolute;
		top: 0;
		transform: translateX(-50%);
		width: 360rpx;
	}

	.names {
		color: #fff;
		display: flex;
		font-size: 32rpx;
		font-weight: 500;
		justify-content: center;
		line-height: 38rpx;
		width: 100%;
	}

	.wo-name,
	.ta-name {
		text-align: center;
		width: 252rpx;

	}

	.wo-name {
		margin-right: 100rpx;
	}

	.head-bottom {
		color: #fff;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		width: 100%;
	}

	.head-bottom .time,
	.records {
		flex: 1;
		line-height: 45rpx;
		text-align: center;
		font-family: 'Num Bold';
		font-weight: bold;

		.words {
			font-size: 24rpx;
			margin-bottom: 20rpx;
			font-weight: 400;
			opacity: .9;
		}
	}

	.head-bottom .time .date {
		font-family: Num Bold;
		font-size: 30rpx;
	}

	.operations {
		background: #fff;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 50rpx 0 hsla(0, 0%, 80%, .3);
		padding: 0 30rpx;
		margin-top: 80rpx;
	}

	.operation {
		border-bottom: 1px solid #eee;
		height: 120rpx;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		display: flex;
	}

	.operation .left {
		align-items: center;
		display: flex;

		.left-icon {
			height: 40rpx;
			margin-right: 24rpx;
			width: 40rpx;
		}

		.desc {
			color: #222;
			font-size: 28rpx;
		}
	}

	.right-icon {
		height: 30rpx;
		width: 30rpx;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		bottom: 20rpx;
		right: 0;
		left: 0;
	}

	.bottom-text {
		color: #999;
		font-size: 24rpx;
		text-align: center;
	}
</style>
